<template>
  <div class="_user-item-container" :class="{ _mobile: props.isMobile }">
    <div class="_user-info">
      <template v-if="props?.user?.user_id">
        <div class="_head">
          <img :src="props.user?.user_head" />
        </div>
        <div class="_name-info w-10rem">
          <div class="_name _text-ellipsis">
            {{ props.user?.user_name }}
          </div>
          <div
            class="_text-ellipsis _price"
            :class="{
              '_text-middle': !props.isMobile,
              '_text-small': props.isMobile,
            }"
          >
            <span class="mr-0.2rem">$</span>
            <span>{{ props.user?.crt_spin_product_amount }}</span>
          </div>
        </div>
      </template>
      <template v-else-if="props.isOwner && seconds > 0">
        <div class="_create-bot">
          <div class="_seconds">{{ seconds }}s</div>
          <el-button
            class="_btn-create"
            type="primary"
            :loading="loading"
            @click="onCreateBot"
          >
            <div class="_btn">Summon Bot</div>
          </el-button>
        </div>
      </template>
      <template v-else>
        <div v-if="!props.isMobile" class="_wait-user _text-small">
          Wait for Player
        </div>
        <div v-else class="_wait-wrapper">
          <div class="_seconds">{{ props.seconds }}s</div>
          <div class="_text-small text-center leading-1rem">
            Wait for Player
          </div>
        </div>
      </template>
    </div>
    <div class="_product-list">
      <div
        class="_product-item"
        v-for="(item, idx) in props.user?.spin_box_list || []"
        :key="item.box_id || idx"
      >
        <template v-if="item?.hit_product?.id">
          <img :src="item.hit_product?.image" />
          <div class="_product-name _text-ellipsis w-full">
            {{ item?.hit_product?.name }}
          </div>
          <pice-btn
            :price="Number(item?.hit_product?.amount || 0)"
            :price-class="{
              '!text-0.56rem !p-0.19rem !rounded-0.19rem !leading-0.63rem':
                props.isMobile,
            }"
          />
        </template>
        <template v-else>
          <div class="_round">Round {{ idx + 1 }}</div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { createBot } from "@/api/battles";
import PiceBtn from "@/components/PriceBtn/price-btn.vue";

import { userItemProps } from "./userItem";

const props = defineProps(userItemProps);

const route = useRoute();

const loading = ref(false);
const timer = ref(-1);
const seconds = ref(60);

function onClear() {
  window.clearTimeout(timer.value);
}

function calculateTime() {
  if (props.user?.user_id) {
    return onClear();
  }
  timer.value = window.setTimeout(() => {
    seconds.value--;
    if (seconds.value > 0) {
      calculateTime();
    }
  }, 1000);
}

async function onCreateBot() {
  loading.value = true;
  const result = await createBot({
    battle_id: Number(route.params.battle_id),
    position: props.position,
  });
  if (result === false) {
    loading.value = false;
  }
}

onBeforeMount(() => {
  calculateTime();
});

onBeforeUnmount(() => {
  onClear();
});
</script>

<style lang="less" scoped>
._user-item-container {
  @apply flex flex-col items-center;
  gap: 3.75rem;
  &._two-person,
  &._three-person {
    ._product-list {
      gap: 0.75rem;
    }
  }

  ._user-info {
    @apply relative flex items-center;
    height: 3.75rem;
    gap: 1.19rem;
    ._head {
      width: 3.75rem;
      aspect-ratio: 1/1;
      min-height: 0;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    ._name-info {
      @apply flex flex-col;
      gap: 0.31rem;
      width: auto;
      ._name {
        color: #9d9d9d;
        font-size: 1rem;
        line-height: 1.13rem;
      }
    }

    ._create-bot {
      @apply absolute flex flex-col justify-center items-center;
      gap: 0.75rem;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      ._seconds {
        @apply flex items-center justify-center;
        width: 1.88rem;
        aspect-ratio: 1/1;
        min-height: 0;
        background: #1a1b1c;
        border: 0.06rem solid #464a4b;
        color: var(--el-color-primary);
        font-size: 0.75rem;
        line-height: 0.88rem;
        border-radius: 50%;
      }

      ._btn {
        color: #1d1f20;
        font-size: 0.88rem;
        line-height: 1.25rem;
      }
    }

    ._wait-user {
      @apply flex items-center justify-center;
      height: 2.25rem;
      aspect-ratio: 10.69 / 2.25;
      min-height: 0;
      color: #9d9d9d;
      background: #353636;
      border-radius: var(--el-border-radius-base);
    }
  }

  ._product-list {
    @apply flex flex-wrap w-full;
    gap: 1.13rem;
    ._product-item {
      @apply flex flex-col justify-between;
      aspect-ratio: 11.38 / 13.19;
      min-height: 0;
      padding: 1.06rem 1.75rem 0.69rem;
      width: calc((100% - 1.13rem) / 2);
      background-color: #232829;
      border-radius: 0.42rem;
      img {
        @apply flex-1 h-0 w-full;
        object-fit: contain;
      }
      ._product-name {
        margin: 0.31rem 0 0.94rem;
        text-align: center;
      }

      ._round {
        @apply flex items-center justify-center h-full w-full;
        color: #9d9d9d;
        font-size: 0.95rem;
        line-height: 1.06rem;
      }
    }
  }

  &._mobile {
    gap: 1rem;
    ._user-info {
      @apply flex-col w-full;
      gap: 0.5rem;
      padding: 0 0.5rem;
      ._head {
        width: 1.88rem;
        height: 1.88rem;
      }

      ._name-info {
        gap: 0.25rem;
        width: 100%;
        ._name,
        ._price {
          text-align: center;
          font-size: 0.7rem;
          line-height: 1;
        }
      }

      ._create-bot {
        gap: 0.5rem;
        ._btn-create {
          padding: 0;
          width: 100%;
        }
        ._btn {
          padding: 0;
          font-size: 0.75rem;
          line-height: 1;
        }
      }

      ._wait-wrapper {
        @apply flex flex-col items-center justify-center;
        color: #9d9d9d;
        font-size: 0.88rem;
        ._seconds {
          @apply flex items-center justify-center;
          width: 1.88rem;
          aspect-ratio: 1/1;
          min-height: 0;
          background: #1a1b1c;
          border: 0.06rem solid #464a4b;
          color: var(--el-color-primary);
          font-size: 0.75rem;
          line-height: 0.88rem;
          border-radius: 50%;
        }
      }
    }
    ._product-list {
      gap: 0.5rem;
      ._product-item {
        aspect-ratio: 4.88 / 6;
        padding: 0.44rem 0.88rem 0.44rem;
        width: 100%;
        font-size: 0.56rem;
        ._product-name {
          margin: 0.4rem 0;
        }

        ._round {
          font-size: 0.56rem;
        }
      }
    }

    &._two-person {
      ._product-list {
        ._product-item {
          width: calc((100% - 0.5rem) / 2);
        }
      }
    }
  }
}
</style>
